<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>报价单统计</span>
      </div>
      <el-card shadow="never" class="cardStyle">
        <el-row type="flex" justify="space-between">
          <el-col v-for="(item, idx) of list" :key="idx" :span="8">
            <el-row type="flex" justify="center">
              <span class="fontStyle">{{ item.name }}</span>
            </el-row>
            <el-row type="flex" justify="center">
              <span class="numberStyle">{{ item.con }}</span>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" class="cardStyle mr_vertical_10">
        <el-row type="flex" justify="space-between">
          <el-col v-for="(item, idx) of list2" :key="idx" :span="8">
            <el-row type="flex" justify="center">
              <span class="fontStyle">{{ item.name }}</span>
            </el-row>
            <el-row type="flex" justify="center">
              <span class="numberStyle">{{ item.con }}</span>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {};

  protected list: any = [
    { name: "售电报价", con: 0 },
    { name: "售电总量", con: 0 },
    { name: "售电总额", con: 0 }
  ];
  protected list2: any = [
    { name: "购电报价", con: 0 },
    { name: "购电总量", con: 0 },
    { name: "购电总额", con: 0 }
  ];

  @Watch("data", { deep: true })
  protected init(val: any) {
    for (const key in val) {
      if (val.hasOwnProperty(key)) {
        switch (key) {
          case "buy_offer_qty":
            this.list2[0].con = `${val[key]}个`;
            break;
          case "buy_total_amt":
            this.list2[2].con = `${Vue.prototype.$coinToYuan(val[key])}元`;
            break;
          case "buy_total_qty":
            this.list2[1].con = `${val[key]}度`;
            break;
          case "sale_offer_qty":
            this.list[0].con = `${val[key]}个`;
            break;
          case "sale_total_amt":
            this.list[2].con = `${Vue.prototype.$coinToYuan(val[key])}元`;
            break;
          case "sale_total_qty":
            this.list[1].con = `${val[key]}度`;
            break;
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.bgColor {
  background-color: rgba(7, 123, 232, 0.05);
}
.cardStyle {
  background: rgba(7, 123, 232, 0.05);
  .fontStyle {
    color: #077be8;
    font-size: 16px;
    line-height: 36px;
  }
  .numberStyle {
    font-size: 24px;
    margin-top: 10px;
  }
}
</style>


